<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"
              th:href="@{/static/layui/css/layui.css}"/>
        <link rel="stylesheet" type="text/css" href="/static/css/part2.css"
              th:href="@{/static/css/part2.css}"/>
        <title>首页</title>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        /********************part1*****************/
        .part1{
            height: 140px;
            border-bottom: #dbdcdd 1px solid;
        }
        .part1 #logo{
            width: 450px;
            float: left;
        }
        .part1 #logo img{
            margin-top: 35px;
            margin-left: 20px;
        }
        .part1 #sear{
            float: left;
            width: 500px;
        }
        .part1 #sear form{
            margin-left: 60px;
            margin-top: 50px;
        }
        .part1 #sear #key{
            border: 1px solid #dedede;
            outline: none;
            width: 260px;
            height: 36px;
            border-right: 0;
        }
        .part1 #sear #key::placeholder{
            opacity: 0.5;
        }
        .part1 #sear #go{
            background: rgb(255, 0, 77);
            cursor: pointer;
            border: 1px solid #dedede;
            outline: 0;
            width: 35px;
            height: 37.33px;
            border-left: 0;
            vertical-align: bottom;
        }
        .part1 #user-msg{
            float: left;
            height: 100%;
        }
        .part1 #user-msg div{
            margin-top: 60px;
            margin-left: 120px;
        }
        .part1 #user-msg #signin{
            margin-right: 20px;
        }
        .part1 #user-msg #logout{
            margin-right: 20px;
        }
    </style>
    <body>
        <div class="part1" th:fragment="part1">
            <div id="logo">
                <a href="#" th:href="@{/index}">
                    <img th:src="@{/static/image/logo.png}" src="/static/image/logo.png"
                         alt="ebook小说">
                </a>
            </div>
            <div id="sear">
                <form action="#" method="post" th:action="@{/search}">
                    <input id="key" type="text" placeholder="搜索作者或书名"><input
                        id="go" type="submit"
                        value="&#xe615;" class="layui-icon">
                </form>
            </div>
            <div id="user-msg">
                <div th:if="${session.user}==null">
                    <a id="signin" class="layui-icon layui-icon-username"
                       href="#" th:href="@{/login}">登录</a>
                    <a href="#" th:href="@{/register}" class="layui-icon">&#xe672;注册</a>
                </div>
                <div th:if="${session.user}!=null">
                    <a id="logout" class="layui-icon"
                       href="#" th:href="@{/logout}">&#xe682;注销</a>
                    <a href="#" th:href="@{/shelf}"
                       class="layui-icon layui-icon-read">书架</a>
                </div>
            </div>
        </div>
        <p style="margin-top: 10px;margin-bottom: 10px"></p>
        <div class="part2">
            <!--<p th:if="${list.size()}==0" style="text-align: center">暂无书籍</p>-->
            <div id="item" th:each="item,status : ${list}"
                 th:class="${status.count%2!=0}?'fl-left':'fl-right'" class="fl-right">
                <div id="book" th:fictionId="${item.id}">
                    <div id="cover">
                        <a href="#" target="_blank" th:href="|@{/chapter/info/}${item.id}|">
                            <img th:src="${item.cover}"
                                 src="http://www.shuquge.com/files/article/image/86/86786/86786s.jpg"
                                 th:alt="${item.bookName}" alt="暗影统领的公主妻">
                        </a>
                    </div>
                    <div id="bookinfo">
                        <div id="bookname">
                            <a th:text="${item.bookName}" href="#"
                               th:href="|@{/chapter/info/}${item.id}|"
                               target="_blank">暗影统领的公主妻</a>
                        </div>
                        <div id="booklink">
                            <!--KDX TODO 2023/6/5:该功能尚未开发-->
                            <a th:text="${item.author}" href="" target="_blank">白白颜卿</a><span>|</span>
                            <a th:text="${item.type}" href="" target="_blank">历史军事</a><span>|</span>
                            <em th:text="${item.state}">
                                连载中
                            </em><span>|</span>
                            <em th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm')}">
                                更新时间&nbsp;&nbsp;2019-12-14T08:08:27.000+0000
                            </em>
                        </div>
                        <div th:text="${item.introduce}" id="bookintro">
                            　　颜乐蓄谋已久的逃离控制着她生活的杀手组织，孤注一掷的想摆脱成为傀儡的命运，却未曾想到那夜的转机，改变了她早已被人安排的命盘，但她又好似陷入另一个旋涡......　　云衡王朝，皇帝亲立抗暝司，寓意破除灰暗，执掌光明，凌驾于一切官府。
                            穆凌绎身为抗暝司统领最大职责是找回王朝唯一的异姓公主，这断了十几年的线索突然再一名女刺客身上明朗了......　　爱而不得的苏祁琰，此后一生有谁能陪伴在不老的他心里呢.......　　皇宫深院，有多少事都陷进了黑暗的阴谋之中......　　江湖传说暗影却是心上之人......　　并肩疆场杀敌之后......……
                        </div>
                    </div>
                    <div id="bookupdate">
                        <a href="#" th:href="|@{/chapter/read/}${item.id}/1|">
                            <button type="button" class="layui-btn layui-btn-xs" >开始阅读</button>
                        </a>
                        <button onclick="addToShelf(this)" type="button" class="layui-btn layui-btn-xs layui-btn-danger">加入书架</button>
                    </div>
                </div>
                <div  th:if="${status.count%2==0}" class="dotline"></div>
            </div>
        </div>
    </body>
    <style>
        #hide {
            background: #f5f1e0;
            color: orange;
            font-size: 14px;
            position: absolute;
            bottom: 30px;
            right: 10px;
            width: 140px;
            line-height: 40px;
            text-align: center;
            border-radius: 5px;
        }
    </style>
    <script th:src="@{https://code.jquery.com/jquery-3.7.0.js}" src="/static/js/jquery-3.7.0.js"
            integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
            crossorigin="anonymous"></script>
    <script th:inline="javascript">
        let msg = [[${msg}]];
        let user = [[${session.user}]];
        function addToShelf(obj) {
            let joinEl = $(obj).parent().parent();
            if (user===null){
                let div = $('<div id="hide" class="layui-icon layui-icon-face-smile">请先登录哦</div>');
                $(joinEl).append(div);
                setTimeout(function () {
                    $(div).remove();
                },2000);
            }else {
                //拿到章节id，拼接url
                let fictionId = joinEl.attr("fictionId");
                let url = "shelf/"+fictionId;

                $.ajax({
                    async: false,
                    url: url,
                    type: 'post',
                    success: function (saved){
                        if (saved){
                            let div = $('<div id="hide" class="layui-icon">成功添加到书架&#x1005;</div>');
                            $(joinEl).append(div);
                            setTimeout(function () {
                                $(div).remove();
                            },2000);
                        }else {
                            let div = $('<div id="hide" class="layui-icon">已经在书架了哦&#xe60c;</div>');
                            $(joinEl).append(div);
                            setTimeout(function () {
                                $(div).remove();
                            },2000);
                        }
                    }
                });
            }
        }
        $(document).ready(function () {
            if (msg!==null)
            alert(msg);
        });

    </script>
</html>